import {
  Card,
  Col,
  Descriptions,
  Row,
  Space,
  Statistic,
  Tabs,
  Tag,DatePicker, Radio
} from 'antd';
import React, { useEffect, useRef, useState } from 'react';
// import { ReloadOutlined } from '@ant-design/icons';
import LineChart from '@/components/LineChart';
import * as api from '@/services/report';
import * as utils from '@/utils/utils';
import {
  CaretDownOutlined,
  CaretUpOutlined,
  ReloadOutlined,
} from '@ant-design/icons';
import ProCard from '@ant-design/pro-card';
import { PageContainer } from '@ant-design/pro-components';
import {
  LightFilter,
  ProFormDatePicker,
  ProFormInstance,
} from '@ant-design/pro-form';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import Countdown from 'antd/lib/statistic/Countdown';
import TabPane from 'antd/lib/tabs/TabPane';
import { useModel } from 'umi';
import dayjs from 'dayjs';
const { RangePicker } = DatePicker;
import CheckableTag from 'antd/lib/tag/CheckableTag';
import * as c from '@/services/consts';

// const renderBadge = (count: number, total?: number, active = false) => {
//   let display = total ? `${count}/${total}` : count;
//   return (
//     <Badge
//       count={display}
//       overflowCount={9999}
//       showZero
//       style={{
//         marginTop: -4,
//         marginLeft: 2,
//         color: active ? '#1890FF' : '#999',
//         backgroundColor: active ? '#E6F7FF' : '#eee',
//       }}
//     />
//   );
// };

// const useMergeState = (initialState:any) => {
//   const [state, setState] = useState(initialState);
//   const setMergedState = (newState:any) => setState((prevState:any) => Object.assign({}, prevState, newState));
//   return [state, setMergedState];
// }

const List: React.FC = () => {
  const { hasRight } = useModel('useAuthModel');
  if (!hasRight('report_userstat')) {
    return <></>;
  }

  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  // const [userRequest, setUserRequest] = useMergeState({
  //   countdownTicks : Date.now() + 60000,
  //   data : undefined,
  //   preTodayRegistCount: undefined,
  //   activeGenre : undefined,
  //   statDay : undefined,
  //   statType : undefined,
  //   myLoading : true
  // });
  // const { myLoading, countdownTicks, data, preTodayRegistCount, activeGenre, statDay, statType } = userRequest;
  // setUserRequest({
  //   preTodayRegistCount: data?.todayRegistCount,
  //   data: result,
  //   myLoading: false
  // });

  const [countdownTicks, setCountdownTicks] = useState<number>(
    Date.now() + 60000,
  );
  const [data, setData] = useState<API.ActiveStatList | undefined>(undefined);
  const [preTodayRegistCount, setPreTodayRegistCount] = useState<
    number | undefined
  >(undefined);
  const [activeGenre, setActiveGenre] = useState<string | undefined>('tot');
  const [statDay, setStatDay] = useState<string | undefined>(
    dayjs(new Date()).format('YYYY-MM-DD'),
  );
  const [statPeriod, setStatPeriod] = useState<string | undefined>('30');
  const [statStartDay, setStatStartDay] = useState<string | undefined>(undefined);
  const [statEndDay, setStatEndDay] = useState<string | undefined>(undefined);
  const [statStartMonth, setStatStartMonth] = useState<string | undefined>(undefined);
  const [statEndMonth, setStatEndMonth] = useState<string | undefined>(undefined);
  const [statType, setStatType] = useState<string | undefined>('1');
  // const [statActiveSubType, setStatActiveSubType] = useState<string | undefined>(undefined);
  const [myLoading, setMyLoading] = useState<boolean | undefined>(true);
  const [productId, setProductId] = useState<string>('');
  // const [myTableLoading, setTableMyLoading] = useState<boolean | undefined>(false);
  const [columnsActDynamic, setColumnsActDynamic] = useState<ProColumns<API.UserCountryStat>[]>([]);

  const { getProductTagItems,globalGrafanaModel } = useModel('useGlobalModel', (model) => ({
    getProductTagItems: model.getProductTagItems,
    globalGrafanaModel: model.globalGrafanaModel,
  }));

  const reload = () => {
    setCountdownTicks(Date.now() + 60000);
    // setUserRequest({
    //   countdownTicks: Date.now() + 60000,
    // });
  };

  const loadData = async (params: any) => {
    // console.log(params);
    const result = await api.activeStat(params, undefined, undefined);
    if (result && result.success) {

      if((statStartDay && activeGenre == '1d') || (statStartDay && activeGenre == '7d') || (statStartDay && activeGenre == '1h' && statType == '5') || (statStartMonth && activeGenre == '30d')){
        if(result.data && result.data.length > 0){
          let newColumns = [];
          for(let i=0; i<result.data[0].data.length; i++){
            newColumns.push(
            {
              title: result.data[0].data[i].title,
              dataIndex: '',
              render: (_, record) => {
                let count = record.data[i]?.count ?? 0;
                if(i == 0){
                  return count;
                }
                else{
                  let odds = count - (record.data[i - 1]?.count ?? 0);
                  if(odds == 0){
                    return count;
                  }
                  else if(odds > 0){
                    return <>{count}<br /><div style={{ fontSize: 14, color: '#999' }}><CaretUpOutlined style={{ color: 'red' }} />{odds}</div></>
                  }
                  else{
                    return <>{count}<br /><div style={{ fontSize: 14, color: '#999' }}><CaretDownOutlined style={{ color: 'green' }} />{odds}</div></>
                  }
                }
              },
            });
          }
          setColumnsActDynamic(columnsActBase.concat(newColumns));
        }
      }
      else{
        setColumnsActDynamic(columnsActBase);
      }

      // console.log(Date.now(), "bbbb", (data?.todayRegistCount ?? 0), (result.todayRegistCount ?? 0));
      setPreTodayRegistCount(data?.todayRegistCount);
      setData(result);
      setMyLoading(false);

      // setUserRequest({
      //   preTodayRegistCount: data?.todayRegistCount,
      //   data: result,
      //   myLoading: false
      // });
    }
  };

  useEffect(() => {
    console.log(activeGenre, statDay, statType, productId, countdownTicks, statStartDay, statEndDay, statStartMonth, statEndMonth, statPeriod);
    loadData({
      genre: activeGenre,
      statDay: statDay,
      statType: statType,
      productId: productId,
      statStartDay,
      statEndDay,
      statStartMonth,
      statEndMonth,
      statPeriod,
      // statActiveSubType
    });
  }, [activeGenre, statDay, statType, productId, countdownTicks, statStartDay, statEndDay, statStartMonth, statEndMonth, statPeriod]);

  const getMinuteAddText = () => {
    //console.log(Date.now(), "cccc", preTodayRegistCount, (data?.todayRegistCount ?? 0));
    if (data == undefined || preTodayRegistCount == undefined) {
      return ``;
    }
    let addCount = (data.todayRegistCount ?? 0) - preTodayRegistCount;
    if (addCount < 0) return ``;
    let ret = (
      <>
        <div style={{ fontSize: 14, color: 'gray' }}>
          +{utils.formatNumber(addCount)}
        </div>
      </>
    );

    return ret;
  };

  const getSuffixText = (
    addText: string | undefined,
    newCount: number | undefined,
    oldCount: number | undefined,
  ) => {
    if (addText) {
      let odds = (newCount ?? 0) - (oldCount ?? 0);
      return (
        <>
          <div style={{ fontSize: 14, color: 'gray' }}>
            {addText}{' '}
            {odds > 0 ? (
              <CaretUpOutlined style={{ color: 'red' }} />
            ) : (
              <CaretDownOutlined style={{ color: 'green' }} />
            )}
            {utils.formatNumber(odds)}
          </div>
        </>
      );
    } else {
      return <></>;
    }
  };

  const getCompareText = (
    addText: string | undefined,
    newCount: number | undefined,
    oldCount: number | undefined,
  ) => {
    if (addText) {
      let odds = (newCount ?? 0) - (oldCount ?? 0);
      return (
        <>
          <div style={{ fontSize: 14, color: 'gray' }}>
            {addText}{' '}
            {odds > 0 ? (
              <CaretUpOutlined style={{ color: 'red' }} />
            ) : (
              <CaretDownOutlined style={{ color: 'green' }} />
            )}
            {utils.formatNumber(odds)}　[{utils.formatNumber(oldCount ?? 0)}]
          </div>
        </>
      );
    } else {
      return <></>;
    }
  };

  const getSuffixTitle = (
    title: string | undefined,
    count: number | undefined,
    total: number | undefined,
  ) => {
    return (
      <>
        <div style={{ fontSize: 14, color: 'gray' }}>
          {title} {utils.formatNumber(count)}
          {total ? ` / ${utils.formatNumber(total)}` : ''}
        </div>
      </>
    );
  };

  const getTotalTitle = () => {
    if (activeGenre == 'regist' || activeGenre == 'tot') {
      return '';
    } else if(activeGenre == '1d' && !statStartDay && statType=='3'){
      return(<>
        <Tag color="blue">
          <b>总数量：{data?.activeTotal}</b>
        </Tag>

        {/* 　　
        {c.Channels.map((val) => {
          return <CheckableTag
          key={`active_sub_type_${val.value}`}
          // style={{backgroundColor:"#1890FF"}}
          checked={statActiveSubType == val.value}
          onChange={(checked) =>{
            // console.log(checked);
            if(checked == true)
              setStatActiveSubType(val.value);
            else
              setStatActiveSubType(undefined);
          }}
        >
          <div
            style={{
              height: 30,
              paddingTop: 5,
              fontSize: 14,
            }}
          >
            {val.label.toLocaleUpperCase()}
          </div>
        </CheckableTag>
        })} */}
        
      
      </>);
    } else {
      return (
        <Tag color="blue">
          <b>总数量：{data?.activeTotal}</b>
        </Tag>
      );
    }
  };

  let columnsActBase: ProColumns<API.UserCountryStat>[] = [
    {
      title: '名称',
      dataIndex: 'title',
      renderText: (val) => {
        return <div style={{ minWidth: 50 }}>{val}</div>;
      },
    },
  ];  

  let columns: ProColumns<API.UserCountryStat>[] = [
    {
      title: '名称',
      dataIndex: 'title',
      renderText: (val) => {
        return <div style={{ minWidth: 50 }}>{val}</div>;
      },
    },
    {
      title: '数量',
      dataIndex: 'count',
      render: (_, record) => {
        if (
          (activeGenre == 'regist' || activeGenre == '1h') &&
          (statType == '5' || statType == '6' || statType == '7' || statType == '8' || statType == '9')
        ) {
          if (statType == '5') {
            if (activeGenre == 'regist') {
              return (
                <>
                  <b>{record.count}</b>
                  <br />
                  {getCompareText('较前日', record.count, record.dayCount)}
                  {getCompareText('前二日', record.count, record.dayCount2)}
                  {getCompareText('前三日', record.count, record.dayCount3)}
                </>
              );
            } else {
              return <>{record.count}</>;
            }
          } else {
            return (
              <Descriptions size="small" column={12}>
                {utils.listHtoV(record.data, 12)?.map((val) => {
                  return (
                    <Descriptions.Item label="">
                      {getSuffixTitle(`${val.title}: `, val.count, undefined)}
                    </Descriptions.Item>
                  );
                })}
              </Descriptions>
            );
          }
        } else {
          if (activeGenre == 'regist' && statType == '3') {
            // console.log(record);
            return (
              <>
                <b>{record.count}</b>　　
                {record.data?.map((val) => {
                  return (
                    <span style={{ fontSize: 14, color: 'gray' }}>
                      {val.title}：{utils.formatNumber(val.count ?? 0)}　
                    </span>
                  );
                })}
              </>
            );
          } else if(activeGenre == '1d'){//} else if(activeGenre == '1d' && !statStartDay && statType=='3'){
            return (
              <>
                <b>{record.count}</b>　
                {record.subTitle ? 
                    <span style={{ fontSize: 14, color: '#888' }}>
                      VIP: {utils.formatNumber(record.subCount ?? 0)} / {((Number(record.subCount) * 100) / (record.count == 0 ? 1 : record.count)).toFixed(2)}%
                    </span>
                : '-'}
                {record.data && record.data.length > 0 ? <>　　　<span style={{ fontSize: 14, color: '#999' }}>{record.data.map((val) => {
                  return(<>
                    {val.title}: {val.count}　
                    {val.subTitle ? 
                      <>VIP: {utils.formatNumber(val.subCount ?? 0)} / {((Number(val.subCount) * 100) / (val.count == 0 ? 1 : val.count)).toFixed(2)}%</>
                      : '-'}
                    　　</>);
                })}</span></> : ''}
              </>
            );
          } else {
            return utils.formatNumber(record.count);
          }
        }
      },
    },
    {
      title: '占比',
      dataIndex: 'count',
      render: (_, record) => {
        let actTotal = data?.activeTotal ?? 1;
        return (
          <div style={{ minWidth: 50 }}>
            {((record.count * 100) / (actTotal == 0 ? 1 : actTotal)).toFixed(2)}
            %
          </div>
        );
      },
    },
    {
      title: '日活数量',
      hideInTable:
        activeGenre == '1d' ||
        activeGenre == '1h' ||
        activeGenre == 'regist' ||
        activeGenre == 'vip',
      dataIndex: 'dayCount',
      render: (_, record) => {
        return utils.formatNumber(record.dayCount);
      },
    },
    {
      title: '日活占比',
      hideInTable:
        activeGenre == '1d' ||
        activeGenre == '1h' ||
        activeGenre == 'regist' ||
        activeGenre == 'vip',
      dataIndex: 'dayCount',
      render: (_, record) => {
        let dayTotal = data?.dayTotal ?? 1;
        return `${
          data?.dayTotal
            ? (
                ((record.dayCount ?? 0) * 100) /
                (dayTotal == 0 ? 1 : dayTotal)
              ).toFixed(2)
            : 0
        }%`;
      },
    },
    {
      title: '日活/数量比',
      hideInTable:
        activeGenre == '1d' ||
        activeGenre == '1h' ||
        activeGenre == 'regist' ||
        activeGenre == 'vip',
      dataIndex: 'dayCount',
      render: (_, record) => {
        let count = record?.count ?? 1;
        return `${
          data?.dayTotal
            ? (
                ((record.dayCount ?? 0) * 100) /
                (count == 0 ? 1 : count)
              ).toFixed(2)
            : 0
        }%`;
      },
    },
  ];  

  let registColumns: ProColumns<API.RegistStat>[] = [
    {
      title: '日期',
      align: 'center',
      width: 180,
      dataIndex: 'date',
      valueType: 'date',
    },
    {
      title: '合计',
      align: 'center',
      dataIndex: 'total',
      render: (_, record) => {
        return utils.formatNumber(record.total);
      },
    },
    {
      title: '苹果',
      align: 'center',
      dataIndex: 'ios',
      render: (_, record) => {
        return utils.formatNumber(record.ios);
      },
    },
    {
      title: '安卓',
      align: 'center',
      dataIndex: 'android',
      render: (_, record) => {
        return utils.formatNumber(record.android);
      },
    },
    {
      title: '安卓(GooglePlay)',
      align: 'center',
      dataIndex: 'androidGoogle',
      render: (_, record) => {
        return utils.formatNumber(record.androidGoogle);
      },
    },
    {
      title: '安卓(APK)',
      align: 'center',
      dataIndex: 'androidUniversal',
      render: (_, record) => {
        return utils.formatNumber(record.androidUniversal);
      },
    },
    {
      title: '苹果占比',
      dataIndex: 'count',
      width: 100,
      render: (_, record) => {
        return `${((record.ios * 100) / record.total).toFixed(2)}%`;
      },
    },
    {
      title: '安卓占比',
      dataIndex: 'count',
      width: 100,
      render: (_, record) => {
        return `${((record.android * 100) / record.total).toFixed(2)}%`;
      },
    },
    {
      title: 'GooglePlay/安卓',
      dataIndex: 'count',
      width: 130,
      render: (_, record) => {
        return `${((record.androidGoogle * 100) / record.android).toFixed(2)}%`;
      },
    },
    {
      title: 'APK/安卓',
      dataIndex: 'count',
      width: 100,
      render: (_, record) => {
        return `${((record.androidUniversal * 100) / record.android).toFixed(
          2,
        )}%`;
      },
    },
  ];

  return (
    <PageContainer>
      <Card
        style={{ marginBottom: -48 }}
        tabList={getProductTagItems(true)}
        // loading={myLoading}
        activeTabKey={productId}
        onTabChange={(key: string) => {
          if (myLoading) return;
          setMyLoading(true);
          setProductId(key);
        }}
      ></Card>

      <Card
        style={{ marginBottom: -48 }}
        tabList={[
          { tab: '统计总览', key: 'tot' },
          { tab: '新增统计', key: 'regist' },
          { tab: '时活跃', key: '1h' },
          { tab: '日活跃', key: '1d' },
          { tab: '周活跃', key: '7d' },
          { tab: '月活跃', key: '30d' },
          { tab: '总用户', key: 'all' },
          { tab: '时间段', key: 'period' },
        ]}
        loading={myLoading}
        activeTabKey={activeGenre}
        onTabChange={(key: string) => {
          if (myLoading) return;
          setMyLoading(true);
          setActiveGenre(key);
          // let ticks = -1;
          // let needLoading = false;
          if (key != 'tot') {
            setCountdownTicks(-1);
          } else {
            //setMyLoading(true);
            setCountdownTicks(Date.now() + 60000);
            // needLoading = true;
            // ticks = Date.now() + 60000;
          }
          // let st = "1";
          if (key == '1h' || key == 'regist') {
            setStatType('5');
            // st = "5";
          } else {
            setStatType('1');
          }

          setStatStartDay(undefined);
          setStatEndDay(undefined);
          setStatStartMonth(undefined);
          setStatEndMonth(undefined);

          // setUserRequest({
          //   activeGenre: key,
          //   statType: st,
          //   myLoading: needLoading,
          //   countdownTicks: ticks,
          // });
        }}
      >
        <LightFilter
          style={{
            textAlign: 'right',
            visibility: activeGenre == 'tot' || activeGenre == 'period' ? 'hidden' : 'visible',
            height: activeGenre == 'tot' || activeGenre == 'period' ? 0 : undefined,
          }}
        >
          <Space>
            <Tabs
              activeKey={statType}
              style={{ marginTop: -50 }}
              items={
                activeGenre == 'regist'
                  ? [
                      { label: '按注册渠道', key: '4' },
                      { label: '按小时统计', key: '5' },
                      { label: '按小时统计国家', key: '6' },
                      { label: '按小时统计平台', key: '7' },
                      { label: '按小时统计版本', key: '8' },
                      { label: '按小时统计渠道', key: '9' },
                      { label: '按国家统计', key: '1' },
                      { label: '按平台统计', key: '2' },
                      { label: '按版本统计', key: '3' },
                    ]
                  : activeGenre == '1h'
                  ? [
                      { label: '按小时统计', key: '5' },
                      { label: '按小时统计国家', key: '6' },
                      { label: '按小时统计平台', key: '7' },
                      { label: '按小时统计版本', key: '8' },
                    ]
                  : activeGenre == '1d'
                  ? [
                    { label: '按国家统计', key: '1' },
                    { label: '按平台统计', key: '2' },
                    { label: '按版本统计', key: '3' },
                    { label: '按注册渠道', key: '4' },
                    ]
                    : activeGenre == 'all'
                    ? [
                      { label: '按国家统计', key: '1' },
                      { label: '按平台统计', key: '2' },
                      { label: '按版本统计', key: '3' },
                      { label: '按注册渠道', key: '4' },
                      ]
                  : activeGenre == 'period'
                  ? []
                  : [
                      { label: '按国家统计', key: '1' },
                      { label: '按平台统计', key: '2' },
                      { label: '按版本统计', key: '3' },
                    ]
              }
              onChange={(activeKey) => {
                setMyLoading(true);
                setStatType(activeKey);
                // setUserRequest({
                //   statType: activeKey,
                // });
              }}
            ></Tabs>
          </Space>

          <Space
            style={{
              marginLeft:30,
              visibility:
                activeGenre == '1d' || activeGenre == '7d' || (activeGenre == '1h' && statType == '5')
                  ? 'visible'
                  : 'hidden',
              width:
                activeGenre == '1d' || activeGenre == '7d' || (activeGenre == '1h' && statType == '5')
                  ? 300
                  : 0,
            }}
          >
            <Tabs
              style={{ marginTop: -1, marginRight: 20 }}
              tabBarExtraContent={
                <RangePicker key="rpStatDate"
                onChange={(values, formatString)=>{
                  if(formatString[0]){
                    setStatStartDay(formatString[0]);
                    setStatEndDay(formatString[1]);
                  }
                  else{
                    setStatStartDay(undefined);
                    setStatEndDay(undefined);
                  }
                  // console.log(values, formatString);
                }}
                value={statStartDay && statEndDay ? [dayjs(statStartDay, 'YYYY-MM-DD'), dayjs(statEndDay, 'YYYY-MM-DD')] : undefined}
                // defaultValue={statStartDay && statEndDay ? [dayjs(statStartDay, 'YYYY-MM-DD'), dayjs(statEndDay, 'YYYY-MM-DD')] : undefined}
                 />
              }
            />
          </Space>

          <Space
            style={{
              marginLeft:30,
              visibility:
                activeGenre == '30d'
                  ? 'visible'
                  : 'hidden',
              width:
                activeGenre == '30d'
                  ? 300
                  : 0,
            }}
          >
            <Tabs
              style={{ marginTop: -1, marginRight: 20 }}
              tabBarExtraContent={
                <RangePicker picker="month" key="rpStatMonthDate"
                onChange={(values, formatString)=>{
                  if(formatString[0]){
                    setStatStartMonth(formatString[0] + "-01");
                    setStatEndMonth(formatString[1] + "-01");
                  }
                  else{
                    setStatStartMonth(undefined);
                    setStatEndMonth(undefined);
                  }
                  // console.log(values, formatString);
                }}
                value={statStartMonth && statEndMonth ? [dayjs(statStartMonth, 'YYYY-MM-DD'), dayjs(statEndMonth, 'YYYY-MM-DD')] : undefined}
                />
              }
            />
          </Space>

          <Space
            style={{
              marginLeft:30,
              visibility:
                activeGenre == '1d' ||
                activeGenre == '1h' ||
                activeGenre == 'regist'
                  ? 'visible'
                  : 'hidden',
              width:
                activeGenre == '1d' ||
                activeGenre == '1h' ||
                activeGenre == 'regist'
                  ? 400
                  : 0,
            }}
          >
            <Tabs
              style={{ marginTop: -1, marginRight: 20 }}
              tabBarExtraContent={
                <ProFormDatePicker
                  label="统计日期"
                  name="statDate"
                  allowClear={false}
                  initialValue={statDay}
                  fieldProps={{
                    onChange(value, dateString) {
                      setStatDay(value?.format('YYYY-MM-DD'));
                    },
                  }}
                />
              }
            />
            <Tabs
              activeKey={statDay}
              style={{ marginTop: -15 }}
              items={[
                { label: '今天', key: dayjs().format('YYYY-MM-DD') },
                {
                  label: '昨天',
                  key: dayjs().add(-1, 'day').format('YYYY-MM-DD'),
                },
                {
                  label: '前天',
                  key: dayjs().add(-2, 'day').format('YYYY-MM-DD'),
                },
              ]}
              onChange={(activeKey) => {
                setStatDay(activeKey);
              }}
            />
          </Space>

          
        </LightFilter>
      </Card>

      <Card loading={myLoading}
          style={{
            visibility: activeGenre == 'tot' ? 'visible' : 'hidden',
            height: activeGenre == 'tot' ? undefined : 0,
          }}>
        <Tabs
          tabBarExtraContent={
            <Space style={{ marginBottom: -20 }}>
              <Countdown
                title=""
                key="cdRefresh"
                value={countdownTicks}
                format="s"
                prefix=""
                suffix="秒后刷新"
                valueStyle={{
                  fontSize: 14,
                  color: 'gray',
                }}
                onFinish={reload}
              />
              <ReloadOutlined onClick={reload} />
            </Space>
          }
          style={{
            marginBottom: 20,
          }}
        >
          <TabPane key="tab1" tab="用户">
            <Row gutter={16}>
              <Col span={2}>
                <Statistic
                  title="当前在线"
                  value={utils.formatNumber(data?.currentConnCount)}
                />
              </Col>
              {data?.registDetails &&
              data?.registDetails?.length > 0 &&
              data?.registDetails[0].key?.indexOf('今日') != -1 ? (
                <Col span={2}>
                  <Statistic
                    title={data?.registDetails[0].key}
                    value={utils.formatNumber(data?.registDetails[0].value)}
                    suffix={getMinuteAddText()}
                  />
                </Col>
              ) : (
                ''
              )}

              <Col span={2}>
                <Statistic
                  title="7日最大在线"
                  value={utils.formatNumber(data?.maxOnline?.day7?.count)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={
                    <div style={{ fontSize: 14, color: 'gray' }}>
                      {data?.maxOnline?.day7?.date}
                    </div>
                  }
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="总用户"
                  value={utils.formatNumber(data?.totalDbUser)}
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="统计总用户"
                  value={utils.formatNumber(data?.totalUser)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={getSuffixText(
                    '较昨日',
                    data?.totalUser,
                    data?.totalUser2,
                  )}
                />
              </Col>
              <Col span={6}>
                <Statistic
                  title="VIP总用户"
                  value={utils.formatNumber(data?.totalVip)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={getSuffixText(
                    '较昨日',
                    data?.totalVip,
                    data?.totalVip2,
                  )}
                />
              </Col>
            </Row>

            

            <Row gutter={24} style={{ marginTop: 40 }}>
              <Col span={12}>
                <ProCard title="流量" 
                  headStyle={{ backgroundColor: '#fafafa' }}
                  headerBordered
                  split="vertical"
                  bordered
                >
                  <iframe
                    src={globalGrafanaModel?.urlGrafanaAllNodeMin} //'https://grafana.biubiuvpn.app:8443/d/eOTPDnoIz/embed_all_nodel_min?orgId=1&theme=light&kiosk&refresh=1m&var-device=All&from=now-24h&to=now'
                    // width="1150"
                    width='100%'
                    height="250"
                    style={{ borderWidth: 0 }}
                  ></iframe>
                </ProCard>
              </Col>
              <Col span={12}>
                <ProCard title="时-日活" 
                  headStyle={{ backgroundColor: '#fafafa' }}
                  headerBordered
                  split="vertical"
                  bordered
                >
                  <LineChart
                    data={data?.activeHourChart ?? []}
                    xfield="date"
                    yfield="count"
                    seriesField="title"
                    height={250}
                    displayLabel={{}}
                    displayPoint={true}
                    backColor={undefined}
                    lineColors={['#5B8FF9', '#5AD8A6', '#5D7092','#FA6400', '#E0B400','#d4f616']}
                  />
                </ProCard>
              </Col>
              
              <Col span={24}>
                <ProCard colSpan="100%" title="时-在线人数" 
                  headStyle={{ backgroundColor: '#fafafa' }}
                  headerBordered
                  split="vertical"
                  bordered
                >
                  <LineChart
                    data={data?.onlineHourChart ?? []}
                    xfield="date"
                    yfield="count"
                    seriesField="title"
                    height={250}
                    displayLabel={{}}
                    displayPoint={true}
                    backColor={undefined}
                    lineColors={['#5B8FF9', '#5AD8A6', '#5D7092','#FA6400', '#E0B400','#d4f616']}
                  />
                </ProCard>
              </Col>
            </Row>

            <Row gutter={16} style={{ marginTop: 40 }}>
              <ProCard
                title="最大在线"
                headStyle={{ backgroundColor: '#fafafa' }}
                headerBordered
                split="vertical"
                bordered
              >
                <ProCard colSpan="10%">
                  <Statistic
                    title="7日最大在线"
                    value={utils.formatNumber(data?.maxOnline?.day7?.count)}
                  />
                  <Statistic
                    value={''}
                    valueStyle={{
                      fontSize: 0,
                    }}
                    prefix={
                      <div style={{ fontSize: 14, color: 'gray' }}>
                        {data?.maxOnline?.day7?.date}
                      </div>
                    }
                  />
                  <Statistic
                    title="30日最大在线"
                    value={utils.formatNumber(data?.maxOnline?.day30?.count)}
                    style={{ marginTop: 30 }}
                  />
                  <Statistic
                    value={''}
                    valueStyle={{
                      fontSize: 0,
                    }}
                    prefix={
                      <div style={{ fontSize: 14, color: 'gray' }}>
                        {data?.maxOnline?.day30?.date}
                      </div>
                    }
                  />
                </ProCard>
                <ProCard colSpan="90%">
                  <LineChart
                    data={data?.maxOnline?.days ?? []}
                    xfield="date"
                    yfield="count"
                    seriesField="title"
                    height={200}
                    displayLabel={{}}
                    displayPoint={true}
                    backColor={undefined}
                  />
                </ProCard>
              </ProCard>
            </Row>

            <Row gutter={16} style={{ marginTop: 40 }}>
              <ProCard
                title="活跃在线用户"
                headStyle={{ backgroundColor: '#fafafa' }}
                headerBordered
                split="vertical"
                bordered
              >
                <ProCard colSpan="10%">
                  <Statistic
                    title="近一小时日志统计"
                    value={utils.formatNumber(data?.onlines?.value)}
                  />
                </ProCard>
                <ProCard colSpan="90%">
                  <Statistic
                    title=""
                    value={''}
                    valueStyle={{
                      fontSize: 0,
                    }}
                    prefix={
                      <>
                        <Descriptions
                          size="small"
                          column={8}
                          contentStyle={{ fontSize: 14, color: '#666' }}
                          title="平台分布"
                          style={{ marginBottom: 30 }}
                        >
                          {utils
                            .listHtoV(data?.onlines?.data, 8)
                            ?.map((val) => {
                              return (
                                <Descriptions.Item label="">
                                  {val.key}: {utils.formatNumber(val.value)}
                                </Descriptions.Item>
                              );
                            })}
                        </Descriptions>
                      </>
                    }
                  />
                </ProCard>
              </ProCard>
            </Row>

            <Row gutter={16} style={{ marginTop: 40 }}>
              <ProCard
                title="VIP用户"
                headStyle={{ backgroundColor: '#fafafa' }}
                headerBordered
                split="vertical"
                bordered
              >
                <ProCard colSpan="10%">
                  <Statistic
                    title="VIP总用户(含未登录)"
                    value={utils.formatNumber(data?.totalVip)}
                  />
                  <Statistic
                    value={''}
                    valueStyle={{
                      fontSize: 0,
                    }}
                    prefix={getSuffixText(
                      '较昨日',
                      data?.totalVip,
                      data?.totalVip2,
                    )}
                  />
                </ProCard>
                <ProCard colSpan="90%">
                  <Statistic
                    title=""
                    value={''}
                    valueStyle={{
                      fontSize: 0,
                    }}
                    prefix={
                      <>
                        <Descriptions
                          size="small"
                          column={4}
                          contentStyle={{ fontSize: 14, color: '#666' }}
                          title="国家分布 (仅含登录成功)"
                          style={{ marginBottom: 30 }}
                        >
                          {/* {
                    utils.listHtoV(data?.vipStat, 10)?.map((val) =>{
                      return <Descriptions.Item label="">{getSuffixTitle(`${val.key}: `,val.value, val.subValue)}</Descriptions.Item>
                    })
                  } */}
                          {utils.listHtoV(data?.vipCountrys, 4)?.map((val) => {
                            return (
                              <Descriptions.Item label="">
                                {val.key}: {val.value}/{val.subValue}
                                <div style={{ color: '#aaa' }}>
                                  &nbsp;
                                  {val.exChannels?.map(
                                    (v2: API.UserStatRefModel) => {
                                      return `${v2.key}:${v2.value}/${v2.subValue} `;
                                    },
                                  )}
                                </div>
                              </Descriptions.Item>
                            );
                          })}
                        </Descriptions>
                        <Descriptions
                          size="small"
                          column={6}
                          contentStyle={{ fontSize: 14, color: '#666' }}
                          title="渠道分布 (仅含登录成功)"
                          style={{ marginBottom: 30 }}
                        >
                          {data?.vipChannels?.map((val) => {
                            return (
                              <Descriptions.Item label="">
                                {/* {val.key}: {utils.formatNumber(val.value)}/
                                {utils.formatNumber(val.subValue)} */}                                
                                
                                <Statistic
                                  title={<div style={{ color: '#777' }}>{val.key}: {utils.formatNumber(val.value)}/
                                  {utils.formatNumber(val.subValue)}</div>}
                                  value={''}
                                  valueStyle={{
                                    fontSize: 0,
                                  }}
                                  prefix={val.exChannels?.map((vv) =>{
                                    return getSuffixText(
                                      `较${vv.key}: ${utils.formatNumber(vv.value)}/${utils.formatNumber(vv.subValue)}`,
                                      val.value,
                                      vv.value,
                                    )
                                  }) }
                                />

                              </Descriptions.Item>
                            );
                          })}
                        </Descriptions>
                        <Descriptions
                          size="small"
                          column={12}
                          contentStyle={{ fontSize: 14, color: '#666' }}
                          title="Token VIP类型"
                          style={{ marginBottom: 30 }}
                        >
                          {utils
                            .listHtoV(data?.vipTokenServices, 12)
                            ?.map((val) => {
                              return (
                                <Descriptions.Item label="">
                                  {val.key}: {utils.formatNumber(val.value)}
                                </Descriptions.Item>
                              );
                            })}
                        </Descriptions>
                        <Descriptions
                          size="small"
                          column={12}
                          contentStyle={{ fontSize: 14, color: '#666' }}
                          title="订单VIP类型"
                          style={{ marginBottom: 30 }}
                        >
                          {utils
                            .listHtoV(data?.vipOrderServices, 12)
                            ?.map((val) => {
                              return (
                                <Descriptions.Item label="">
                                  {val.key}: {utils.formatNumber(val.value)}
                                </Descriptions.Item>
                              );
                            })}
                        </Descriptions>
                      </>
                    }
                  />
                </ProCard>
              </ProCard>
            </Row>
          </TabPane>
          <TabPane key="tab2" tab="新增">
            {data?.registDetails?.map((reg) => {
              return (
                <Row gutter={16} style={{ marginTop: 40 }}>
                  <Col span={2}>
                    <Statistic
                      title={reg.key}
                      value={utils.formatNumber(reg.value)}
                      suffix={
                        reg.key?.indexOf('今日') != -1 ? getMinuteAddText() : ''
                      }
                    />
                    <Statistic
                      title={reg.subKey}
                      value={utils.formatNumber(reg.subValue)}
                      style={{ marginTop: 10 }}
                    />
                  </Col>
                  <Col span={2}>
                    <Statistic
                      title="渠道分布"
                      value={''}
                      valueStyle={{
                        fontSize: 0,
                      }}
                      prefix={
                        <Descriptions size="small" column={1}>
                          {reg.channels?.map((val) => {
                            return (
                              <Descriptions.Item label="">
                                {getSuffixTitle(
                                  `${val.key}: `,
                                  val.value,
                                  undefined,
                                )}
                              </Descriptions.Item>
                            );
                          })}
                        </Descriptions>
                      }
                    />
                  </Col>
                  <Col span={12}>
                    <Statistic
                      title="国家分布"
                      value={''}
                      valueStyle={{
                        fontSize: 0,
                      }}
                      prefix={
                        <Descriptions size="small" column={7}>
                          {utils.listHtoV(reg.countrys, 7)?.map((val) => {
                            return (
                              <Descriptions.Item label="">
                                {getSuffixTitle(
                                  `${val.key}: `,
                                  val.value,
                                  undefined,
                                )}
                              </Descriptions.Item>
                            );
                          })}
                        </Descriptions>
                      }
                    />
                  </Col>
                </Row>
              );
            })}
          </TabPane>
          <TabPane key="tab3" tab="活跃">
            <Row gutter={16} style={{ marginTop: 60 }}>
              <Col span={2}>
                <Statistic
                  title="今日活跃"
                  value={utils.formatNumber(data?.activeStat.t0)}
                />
                <Statistic
                  title="上小时活跃"
                  value={utils.formatNumber(data?.activeStat.subT0)}
                  style={{ marginTop: 10 }}
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="昨日活跃"
                  value={utils.formatNumber(data?.activeStat.t1)}
                  // suffix={getSuffixText('较上日',data?.activeStat.t1,data?.activeStat.t2)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={
                    <>
                      {getSuffixText(
                        '较上日',
                        data?.activeStat.t1,
                        data?.activeStat.t2,
                      )}
                      <br />
                      {getSuffixText(
                        '较上周',
                        data?.activeStat.t1,
                        data?.activeStat.t8,
                      )}
                    </>
                  }
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="前日活跃"
                  value={utils.formatNumber(data?.activeStat.t2)}
                  // suffix={getSuffixText('较上日',data?.activeStat.t2,data?.activeStat.t3)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={
                    <>
                      {getSuffixText(
                        '较上日',
                        data?.activeStat.t2,
                        data?.activeStat.t3,
                      )}
                      <br />
                      {getSuffixText(
                        '较上周',
                        data?.activeStat.t2,
                        data?.activeStat.t9,
                      )}
                    </>
                  }
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="三天前活跃"
                  value={utils.formatNumber(data?.activeStat.t3)}
                  // suffix={getSuffixText('较上日',data?.activeStat.t3,data?.activeStat.t4)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={
                    <>
                      {getSuffixText(
                        '较上日',
                        data?.activeStat.t3,
                        data?.activeStat.t4,
                      )}
                      <br />
                      {getSuffixText(
                        '较上周',
                        data?.activeStat.t3,
                        data?.activeStat.t10,
                      )}
                    </>
                  }
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="四天前活跃"
                  value={utils.formatNumber(data?.activeStat.t4)}
                  // suffix={getSuffixText('较上日',data?.activeStat.t4,data?.activeStat.t5)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={
                    <>
                      {getSuffixText(
                        '较上日',
                        data?.activeStat.t4,
                        data?.activeStat.t5,
                      )}
                      <br />
                      {getSuffixText(
                        '较上周',
                        data?.activeStat.t4,
                        data?.activeStat.t11,
                      )}
                    </>
                  }
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="五天前活跃"
                  value={utils.formatNumber(data?.activeStat.t5)}
                  // suffix={getSuffixText('较上日',data?.activeStat.t5,data?.activeStat.t6)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={
                    <>
                      {getSuffixText(
                        '较上日',
                        data?.activeStat.t5,
                        data?.activeStat.t6,
                      )}
                      <br />
                      {getSuffixText(
                        '较上周',
                        data?.activeStat.t5,
                        data?.activeStat.t12,
                      )}
                    </>
                  }
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="六天前活跃"
                  value={utils.formatNumber(data?.activeStat.t6)}
                  // suffix={getSuffixText('较上日',data?.activeStat.t5,data?.activeStat.t6)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={
                    <>
                      {getSuffixText(
                        '较上日',
                        data?.activeStat.t6,
                        data?.activeStat.t7,
                      )}
                      <br />
                      {getSuffixText(
                        '较上周',
                        data?.activeStat.t6,
                        data?.activeStat.t13,
                      )}
                    </>
                  }
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="七天前活跃"
                  value={utils.formatNumber(data?.activeStat.t7)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={
                    <>
                      {getSuffixText(
                        '较上日',
                        data?.activeStat.t7,
                        data?.activeStat.t8,
                      )}
                      <br />
                      {getSuffixText(
                        '较上周',
                        data?.activeStat.t7,
                        data?.activeStat.t14,
                      )}
                    </>
                  }
                />
              </Col>
            </Row>

            <Row gutter={16} style={{ marginTop: 60 }}>
              <Col span={2}>
                <Statistic
                  title="本周活跃"
                  value={utils.formatNumber(data?.weekCount)}
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="上周活跃"
                  value={utils.formatNumber(data?.weekCount2)}
                  // suffix={getSuffixText('较上周',data?.weekCount2,data?.weekCount3)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={getSuffixText(
                    '较上周',
                    data?.weekCount2,
                    data?.weekCount3,
                  )}
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="二周前活跃"
                  value={utils.formatNumber(data?.weekCount3)}
                  // suffix={getSuffixText('较上周',data?.weekCount3,data?.weekCount4)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={getSuffixText(
                    '较上周',
                    data?.weekCount3,
                    data?.weekCount4,
                  )}
                />
              </Col>
              <Col span={10}>
                <Statistic
                  title="三周前活跃"
                  value={utils.formatNumber(data?.weekCount4)}
                />
              </Col>
            </Row>

            <Row gutter={16} style={{ marginTop: 60 }}>
              <Col span={2}>
                <Statistic
                  title="本月活跃"
                  value={utils.formatNumber(data?.monthCount)}
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="上月活跃"
                  value={utils.formatNumber(data?.monthCount2)}
                  // suffix={getSuffixText('较上月',data?.monthCount2,data?.monthCount3)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={getSuffixText(
                    '较上月',
                    data?.monthCount2,
                    data?.monthCount3,
                  )}
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="二月前活跃"
                  value={utils.formatNumber(data?.monthCount3)}
                  // suffix={getSuffixText('较上月',data?.monthCount3,data?.monthCount4)}
                />
                <Statistic
                  value={''}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={getSuffixText(
                    '较上月',
                    data?.monthCount3,
                    data?.monthCount4,
                  )}
                />
              </Col>
              <Col span={10}>
                <Statistic
                  title="三月前活跃"
                  value={utils.formatNumber(data?.monthCount4)}
                />
              </Col>
            </Row>
          </TabPane>
          {/* <TabPane key="tab4" tab="收入">

        {data?.saleDays?.map((sale)=>{
          return(
          <Row gutter={16} style={{marginTop:60}}>
          <Col span={2}>
            <Statistic
              title={sale.title}
              value={utils.formatNumber( ((sale.amount ?? 0) + (sale.renewAmount ?? 0) + (sale.siteAmount ?? 0)).toFixed(2) )}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {(sale.count ?? 0) + (sale.renewCount ?? 0) + (sale.siteCount ?? 0)}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="新增总计"
              value={utils.formatNumber(((sale.amount ?? 0) + (sale.siteAmount ?? 0)).toFixed(2))}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {(sale.count ?? 0) +(sale.siteCount ?? 0)}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="官网"
              value={utils.formatNumber(sale.siteAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.siteCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="AppStore新增"
              value={utils.formatNumber(sale.appleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.appleCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="GooglePlay新增"
              value={utils.formatNumber(sale.googleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.googleCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="续订总计"
              value={utils.formatNumber(((sale.renewAmount ?? 0)).toFixed(2))}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {(sale.renewCount ?? 0) }</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="AppStore续订"
              value={utils.formatNumber(sale.renewAppleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.renewAppleCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="GooglePlay续订"
              value={utils.formatNumber(sale.renewGoogleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.renewGoogleCount}</div>}
            />
          </Col>

        </Row>);
        })}

          
        </TabPane> */}
        </Tabs>
      </Card>
      


      <Card loading={myLoading} 
          style={{
            visibility: activeGenre == 'period' ? 'visible' : 'hidden',
            height: activeGenre == 'period' ? undefined : 0,
          }}
        >
          

            <Row gutter={24} style={{ marginTop: 0 }}>
              <Col span={24}>
            <Tabs
              activeKey={statPeriod}
              style={{ marginTop: -15 }}
              items={[
                { label: '近7天', key: '7' },
                { label: '近30天', key: '30' },
                { label: '近60天', key: '60' },
                { label: '近90天', key: '90' },
                { label: '近180天', key: '180' },
                { label: '近365天', key: '365' },
                { label: '近500天', key: '500' },
                { label: '近二年', key: '730' },
              ]}
              onChange={(activeKey) => {
                setStatPeriod(activeKey);
              }}
            />

              </Col>

              <Col span={24}>
                <ProCard colSpan="100%" title="日活跃用户" 
                  headStyle={{ backgroundColor: '#fafafa' }}
                  headerBordered
                  split="vertical"
                  bordered
                >
                  <LineChart
                    data={data?.activeHourChart ?? []}
                    xfield="date"
                    yfield="count"
                    seriesField="title"
                    height={250}
                    displayLabel={{}}
                    displayPoint={false}
                    backColor={undefined}
                    // lineColors={['#FA6400', '#E0B400','#d4f616']}
                  />
                </ProCard>
              </Col>


              <Col span={24} style={{ marginTop:40 }}>
                <ProCard colSpan="100%" title="日注册用户" 
                  headStyle={{ backgroundColor: '#fafafa' }}
                  headerBordered
                  split="vertical"
                  bordered
                >
                  <LineChart
                    data={data?.onlineHourChart ?? []}
                    xfield="date"
                    yfield="count"
                    seriesField="title"
                    height={250}
                    displayLabel={{}}
                    displayPoint={false}
                    backColor={undefined}
                    // lineColors={['#FA6400', '#E0B400','#d4f616']}
                  />
                </ProCard>
              </Col>
            </Row>

      </Card>

      <ProTable
        // headerTitle={getTotalTitle()}
        rowKey="id"
        options={{
          fullScreen: false,
          reload: false,
          setting: false,
          density: false,
        }}
        style={{
          visibility:
            !(activeGenre == '1d' && statStartDay) && !(activeGenre == '7d' && statStartDay) && !(activeGenre == '1h' && statStartDay && statType == '5') && !(activeGenre == '30d' && statStartMonth)
              ? 'hidden'
              : 'visible',
          height:
            !(activeGenre == '1d' && statStartDay) && !(activeGenre == '7d' && statStartDay) && !(activeGenre == '1h' && statStartDay && statType == '5') && !(activeGenre == '30d' && statStartMonth)
              ? 0
              : undefined,
        }}
        loading={myLoading}
        columnEmptyText={''}
        actionRef={actionRef}
        formRef={formRef}
        columns={columnsActDynamic}
        search={false}
        pagination={false}
        dataSource={data?.data}
      />

      <ProTable
        headerTitle={getTotalTitle()}
        rowKey="id"
        options={{
          fullScreen: false,
          reload: false,
          setting: false,
          density: false,
        }}
        style={{
          visibility:
            (activeGenre == 'regist' && statType == '4') || activeGenre == 'tot' || activeGenre == 'period' || (activeGenre == '1d' && statStartDay) || (activeGenre == '1h' && statStartDay && statType == '5') || (activeGenre == '7d' && statStartDay) || (activeGenre == '30d' && statStartMonth)
              ? 'hidden'
              : 'visible',
          height:
            (activeGenre == 'regist' && statType == '4') || activeGenre == 'tot' || activeGenre == 'period' || (activeGenre == '1d' && statStartDay) || (activeGenre == '1h' && statStartDay && statType == '5') || (activeGenre == '7d' && statStartDay) || (activeGenre == '30d' && statStartMonth)
              ? 0
              : undefined,
        }}
        loading={myLoading}
        columnEmptyText={''}
        actionRef={actionRef}
        formRef={formRef}
        columns={columns}
        search={false}
        pagination={false}
        dataSource={data?.data}
      />

      <ProTable
        rowKey="id"
        options={{
          fullScreen: false,
          reload: false,
          setting: false,
          density: false,
        }}
        loading={myLoading}
        style={{
          visibility:
            activeGenre == 'regist' && statType == '4' ? 'visible' : 'hidden',
          height: activeGenre == 'regist' && statType == '4' ? undefined : 0,
        }}
        columnEmptyText={''}
        actionRef={actionRef}
        formRef={formRef}
        columns={registColumns}
        search={false}
        pagination={false}
        dataSource={data?.registStat}
      />
    </PageContainer>
  );
};

export default List;
